<template>
  <div class="home-view relative">
    <!-- 背景图片 -->
    <div class="absolute inset-0 bg-gradient-overlay">
      <img src="https://cn.bing.com/images/search?view=detailV2&ccid=i2fHj0ZY&id=11A5FF8D6F213538253A8E35462FBE313D1F2E71&thid=OIP.i2fHj0ZYeZl1GcxHtgzOVwHaLf&mediaurl=https%3a%2f%2fbpic.588ku.com%2fback_origin_min_pic%2f19%2f04%2f12%2fe204b4a82224b5159fe50ed8a409e631.jpg&exph=1242&expw=800&q=%e8%93%9d%e8%89%b2%e5%a4%a7%e6%b0%94%e6%a2%a6%e5%b9%bb%e6%98%9f%e7%a9%ba%e8%83%8c%e6%99%af%e7%b4%a0%e6%9d%90%e8%83%8c%e6%99%af%e5%9b%be%e7%89%87%e5%85%8d%e8%b4%b9%e4%b8%8b%e8%bd%bd-%e5%8d%83%e5%ba%93%e7%bd%91&mode=overlay&FORM=IQFRBA&ck=8208FA7DF2AC5E24FF4120FD23DF7753&selectedIndex=0" alt="Background" class="w-full h-full object-cover">
    </div>
    
    <div class="container mx-auto px-4 py-6 flex flex-col md:flex-row gap-6">
      <!-- 左侧内容 -->
      <div class="w-full md:w-2/3">
        <!-- 诗词轮播 -->
        <el-card class="mb-6 poem-card">
          <template #header>
            <div class="flex justify-between items-center">
              <h3 class="text-lg font-bold text-primary">经典诗词轮播</h3>
              <div class="flex space-x-2">
                <el-button 
                  size="small" 
                  type="primary" 
                  plain
                  @click="prevPoem">
                  <el-icon><ArrowLeft /></el-icon> 上一首
                </el-button>
                <el-button 
                  size="small" 
                  type="primary" 
                  plain
                  @click="nextPoem">
                  <el-icon><ArrowRight /></el-icon> 下一首
                </el-button>
              </div>
            </div>
          </template>
          
          <div class="poem-content text-center">
            <h4 class="text-2xl font-serif mb-4 text-primary">{{ currentPoem.title }}</h4>
            <div class="poem-lines space-y-2 mb-6 text-xl font-serif">
              <p v-for="(line, index) in currentPoem.content" :key="index">{{ line }}</p>
            </div>
            <p class="text-secondary">{{ currentPoem.author }}</p>
          </div>
        </el-card>
        
        <!-- 每日一句 -->
        <el-card class="mb-6 poem-card">
          <template #header>
            <h3 class="text-lg font-bold text-primary">每日一句</h3>
          </template>
          
          <div class="text-center py-6">
            <p class="text-2xl font-serif italic mb-4 text-primary">"{{ dailyPoem.line }}"</p>
            <p class="text-secondary">—— {{ dailyPoem.poet }}《{{ dailyPoem.title }}》</p>
          </div>
        </el-card>
        
        <!-- 诗人名言 -->
        <el-card class="mb-6 poem-card poet-quote-card">
          <template #header>
            <div class="flex justify-between items-center w-full">
              <h3 class="text-lg font-bold text-primary">诗人名言</h3>
              <el-icon class="text-primary animate-pulse"><Star /></el-icon>
            </div>
          </template>
          
          <div class="block text-center">
            <el-carousel height="180px" :autoplay="true">
              <el-carousel-item v-for="item in poetQuotes" :key="item">
                <div class="quote-container">
                  <h3 class="text-xl">{{ item.poet }}</h3>
                  <p class="text-lg italic my-2">{{ item.quote }}</p>
                  <p class="text-sm text-secondary">——{{ item.dynasty }}《{{ item.source }}》</p>
                </div>
              </el-carousel-item>
            </el-carousel>
          </div>
        </el-card>
        
        <!-- 诗人故事 -->
        <el-card class="mb-6 poem-card">
          <template #header>
            <h3 class="text-lg font-bold text-primary">诗人故事</h3>
          </template>
          
          <el-row :gutter="20">
            <el-col :span="12" v-for="(story, index) in poetStories" :key="index">
              <el-card shadow="hover" class="h-full story-card">
                <template #header>
                  <div class="flex justify-between items-center w-full">
                    <span class="text-primary">{{ story.title }}</span>
                    <el-tag type="info" size="small">故事</el-tag>
                  </div>
                </template>
                <div class="story-content">
                  <p class="text-sm text-gray-600">{{ story.content }}</p>
                  <el-button 
                    size="small" 
                    type="primary" 
                    link 
                    class="mt-4"
                    @click="showStoryDetail(story)">
                    阅读更多
                  </el-button>
                </div>
              </el-card>
            </el-col>
          </el-row>
        </el-card>
        
        <!-- 诗词典故 -->
        <el-card class="mb-6 poem-card">
          <template #header>
            <h3 class="text-lg font-bold text-primary">诗词典故</h3>
          </template>
          
          <el-tabs v-model="activeTab" type="border-card">
            <el-tab-pane label="红豆生南国" name="1">
              <div class="tab-content">
                <p class="text-sm text-gray-600">
                  王维《相思》中的红豆象征相思之情，源自汉代乐府诗《饮马长城窟行》："客从远方来，遗我双鲤鱼。呼儿烹鲤鱼，中有尺素书。长跪读素书，书中竟何如？上言加餐食，下言长相忆。"
                </p>
                <el-button type="text" class="mt-4" @click="showPoetryDetail(1)">了解更多</el-button>
              </div>
            </el-tab-pane>
            <el-tab-pane label="折柳送别" name="2">
              <div class="tab-content">
                <p class="text-sm text-gray-600">
                  古人有折柳送别的习俗，因为"柳"与"留"谐音，表达挽留之意。最早见于《诗经·小雅·采薇》："昔我往矣，杨柳依依。今我来思，雨雪霏霏。"
                </p>
                <el-button type="text" class="mt-4" @click="showPoetryDetail(2)">了解更多</el-button>
              </div>
            </el-tab-pane>
            <el-tab-pane label="东篱采菊" name="3">
              <div class="tab-content">
                <p class="text-sm text-gray-600">
                  陶渊明《饮酒·其五》中"采菊东篱下，悠然见南山"，东篱成为隐士居所的象征，菊花则象征高洁的品格。
                </p>
                <el-button type="text" class="mt-4" @click="showPoetryDetail(3)">了解更多</el-button>
              </div>
            </el-tab-pane>
          </el-tabs>
        </el-card>
        
        <!-- 互动游戏 -->
        <el-card class="poem-card">
          <template #header>
            <h3 class="text-lg font-bold text-primary">互动游戏</h3>
          </template>
          
          <el-row :gutter="20">
            <el-col :span="8" v-for="(game, index) in games" :key="index">
              <el-card shadow="hover" class="h-full flex-col game-card">
                <div class="game-icon flex items-center justify-center mx-auto my-4">
                  <i :class="game.icon" class="text-primary text-3xl"></i>
                </div>
                <template #header>
                  <div class="flex justify-center">
                    <span class="font-bold text-primary">{{ game.title }}</span>
                  </div>
                </template>
                <p class="text-center text-sm text-gray-600 flex-grow">{{ game.description }}</p>
                <el-button 
                  size="small" 
                  type="primary" 
                  class="w-full mt-4"
                  @click="startGame(game.path)">
                  开始游戏
                </el-button>
              </el-card>
            </el-col>
          </el-row>
        </el-card>
      </div>
      
      <!-- 右侧边栏 -->
      <div class="w-full md:w-1/3 space-y-6">
        <!-- 功能按钮 -->
        <el-card class="poem-card">
          <template #header>
            <h3 class="text-lg font-bold text-primary">平台功能</h3>
          </template>
          
          <div class="grid grid-cols-2 gap-4">
            <el-button 
              v-for="(feature, index) in features" 
              :key="index" 
              type="primary" 
              class="flex flex-col items-center justify-center h-32"
              @click="navigateTo(feature.path)">
              <div class="icon-wrapper mb-2">
                <i :class="feature.icon" class="text-3xl"></i>
              </div>
              <span>{{ feature.name }}</span>
            </el-button>
          </div>
        </el-card>
        
        <!-- 诗歌分类 -->
        <el-card class="poem-card">
          <template #header>
            <h3 class="text-lg font-bold text-primary">诗歌分类</h3>
          </template>
          
          <el-menu 
            mode="vertical" 
            :default-active="categoryActiveIndex"
            @select="handleCategorySelect"
            class="category-menu">
            <el-menu-item index="1">
              <el-icon><Document /></el-icon>
              <span>唐诗</span>
            </el-menu-item>
            <el-menu-item index="2">
              <el-icon><Notebook /></el-icon>
              <span>宋词</span>
            </el-menu-item>
            <el-menu-item index="3">
              <el-icon><Tickets /></el-icon>
              <span>元曲</span>
            </el-menu-item>
            <el-menu-item index="4">
              <el-icon><ScaleToOriginal /></el-icon>
              <span>现代诗</span>
            </el-menu-item>
            <el-menu-item index="5">
              <el-icon><Postcard /></el-icon>
              <span>外国诗</span>
            </el-menu-item>
          </el-menu>
        </el-card>
        
        <!-- 热门推荐 -->
        <el-card class="poem-card">
          <template #header>
            <h3 class="text-lg font-bold text-primary">热门推荐</h3>
          </template>
          
          <el-scrollbar height="400px" class="popular-poems">
            <div 
              v-for="(item, index) in popularPoems" 
              :key="index" 
              class="mb-3 poem-item"
              @click="showPoemDetail(index)">
              <el-card shadow="hover">
                <div class="flex justify-between items-center">
                  <div>
                    <h4 class="text-base font-semibold">{{ item.title }}</h4>
                    <p class="text-xs text-gray-500">{{ item.dynasty }}</p>
                  </div>
                  <el-icon><Star /></el-icon>
                </div>
                <p class="text-right text-sm mt-2 text-gray-600">{{ item.author }}</p>
              </el-card>
            </div>
          </el-scrollbar>
        </el-card>
      </div>
    </div>
 

  <!-- 诗人故事详情对话框 -->
  <el-dialog
    v-model="dialogVisible"
    title="诗人故事"
    width="50%"
    :before-close="handleClose">
    <div v-if="currentStory" class="story-detail">
      <h3 class="text-xl font-bold mb-4">{{ currentStory.title }}</h3>
      <p class="text-gray-600 leading-relaxed">{{ currentStory.detail }}</p>
    </div>
    <div v-else-if="currentPoetry" class="poetry-detail">
      <h3 class="text-xl font-bold mb-4">{{ currentPoetry.title }}</h3>
      <p class="text-gray-600 leading-relaxed">{{ currentPoetry.detail }}</p>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">关闭</el-button>
    </span>
  </el-dialog>

</div>
</template>

<script>
import { ElMessage, ElMessageBox } from 'element-plus'

export default {
  name: 'HomeView',
  
  data() {
    return {
      // 诗词轮播
      poems: [
        {
          title: '静夜思',
          content: ['床前明月光，', '疑是地上霜。', '举头望明月，', '低头思故乡。'],
          author: '李白'
        },
        {
          title: '春晓',
          content: ['春眠不觉晓，', '处处闻啼鸟。', '夜来风雨声，', '花落知多少。'],
          author: '孟浩然'
        },
        {
          title: '望庐山瀑布',
          content: ['日照香炉生紫烟，', '遥看瀑布挂前川。', '飞流直下三千尺，', '疑是银河落九天。'],
          author: '李白'
        },
        {
          title: '春望',
          content: ['国破山河在，', '城春草木深。', '感时花溅泪，', '恨别鸟惊心。', '烽火连三月，', '家书抵万金。', '白头搔更短，', '浑欲不胜簪。'],
          author: '杜甫'
        }
      ],
      currentPoemIndex: 0,
      
      // 每日一句
      dailyPoem: {
        line: "海内存知己，天涯若比邻。",
        poet: "王勃",
        title: "送杜少府之任蜀州"
      },
      
      // 诗人故事
      poetStories: [
        {
          title: "李白醉酒",
          content: "传说李白醉酒后，在长安市上题诗于酒楼墙壁，天子呼来不上船，自称臣是酒中仙...",
          detail: "李白，字太白，号青莲居士，唐代伟大的浪漫主义诗人，被后人誉为'诗仙'。传说李白醉酒后，在长安市上题诗于酒楼墙壁，天子呼来不上船，自称臣是酒中仙。李白性格豪迈，不拘小节，好饮酒作诗。他的诗歌豪放飘逸，想象丰富，语言清新自然，意境奇妙，音律和谐，具有强烈的艺术感染力。代表作有《蜀道难》《行路难》《将进酒》《望庐山瀑布》等。"
        },
        {
          title: "杜甫草堂",
          content: "杜甫在成都浣花溪畔建草堂，写下《茅屋为秋风所破歌》，安得广厦千万间，大庇天下寒士俱欢颜...",
          detail: "杜甫，字子美，唐代伟大的现实主义诗人，被后人称为'诗圣'。安史之乱期间，杜甫流落成都，在浣花溪畔建了一座草堂，世称杜甫草堂。在这里杜甫写下了许多反映民生疾苦的诗篇，表达了他忧国忧民的情怀。'安得广厦千万间，大庇天下寒士俱欢颜，风雨不动安如山'出自他的名作《茅屋为秋风所破歌》。代表作有《登高》《春望》《北征》《三吏》《三别》等。"
        }
      ],
      
      // 诗词典故详情
      poetryDetails: [
        {
          title: "红豆生南国",
          detail: "红豆生南国，春来发几枝。愿君多采撷，此物最相思。王维的《相思》中提到的红豆，又名相思子，产于南方。在古代，人们常用红豆作为爱情和友情的信物，象征着相思之情。红豆的意象源自汉代乐府诗《饮马长城窟行》中的'上言加餐饭，下言长相忆'。在王维的诗中，红豆成为了表达对远方友人思念之情的载体。这首诗表达了诗人对友人的深切思念，以及对友情的珍视，成为中国古代抒情诗中的名篇。"
        },
        {
          title: "折柳送别",
          detail: "古人有折柳送别的习俗，因为'柳'与'留'谐音，表达挽留之意。最早见于《诗经·小雅·采薇》中的'昔我往矣，杨柳依依。今我来思，雨雪霏霏'。折柳送别的习俗在唐代达到鼎盛，成为文人墨客诗中常见的意象。如李白的《春夜洛城闻笛》中有'此夜曲中闻折柳，何人不起故园情'。柳树在中国文化中具有特殊的象征意义，因其生命力顽强，又代表离别与思念，成为古代送别诗中的重要元素。"
        },
        {
          title: "东篱采菊",
          detail: "陶渊明是中国古代著名的田园诗人，他的《饮酒·其五》中有'采菊东篱下，悠然见南山'的名句。东篱采菊成为隐士生活的象征，表达了诗人远离尘世纷扰、追求高洁品格的情怀。菊花在中国文化中象征着高洁、长寿和隐逸。陶渊明通过描写采菊这一生活场景，展现了他归隐田园后的闲适生活和淡泊名利的人生态度。这首诗反映了魏晋时期士人对自然的向往和对社会现实的不满，成为中国古代田园诗的典范之作。"
        }
      ],
      
      // 互动游戏
      games: [
        {
          title: "诗词接龙",
          description: "根据上句接出下句，测试你的诗词储备量！",
          icon: "fa fa-link",
          path: "poem-chain.html"
        },
        {
          title: "诗词填空",
          description: "填补诗词中的空缺部分，感受诗词之美！",
          icon: "fa fa-pencil",
          path: "poem-fill.html"
        },
        {
          title: "诗人猜猜",
          description: "根据给出的诗句，猜猜是哪位诗人的作品！",
          icon: "fa fa-user-secret",
          path: "poet-guess.html"
        }
      ],
      
      // 平台功能
      features: [
        {
          name: "诗歌搜索",
          icon: "fa fa-search",
          path: "/poetry-search"
        },
        {
          name: "AI创作",
          icon: "fa fa-robot",
          path: "/chat"
        },
        {
          name: "用户社区",
          icon: "fa fa-users",
          path: "/forum"
        }
      ],
      
      // 分类和热门
      categoryActiveIndex: '1',
      popularPoems: [
        { 
          id: 1, 
          title: "静夜思", 
          author: "李白", 
          dynasty: "唐代",
          content: "床前明月光，疑是地上霜。<br>举头望明月，低头思故乡。"
        },
        { id: 2, title: "春晓", author: "孟浩然", dynasty: "唐代" },
        { id: 3, title: "水调歌头·明月几时有", author: "苏轼", dynasty: "宋代" },
        { id: 4, title: "望庐山瀑布", author: "李白", dynasty: "唐代" }
      ],
      
      // 其他
      activeTab: '1',
      poetQuotes: [
        {
          poet: '李白',
          dynasty: '唐',
          quote: '天生我材必有用，千金散尽还复来。',
          source: '将进酒'
        },
        {
          poet: '杜甫',
          dynasty: '唐',
          quote: '会当凌绝顶，一览众山小。',
          source: '望岳'
        },
        {
          poet: '苏轼',
          dynasty: '宋',
          quote: '竹杖芒鞋轻胜马，谁怕？一蓑烟雨任平生。',
          source: '定风波'
        },
        {
          poet: '白居易',
          dynasty: '唐',
          quote: '同是天涯沦落人，相逢何必曾相识。',
          source: '琵琶行'
        }
      ],
      
      // 对话框相关
      dialogVisible: false,
      currentStory: null,
      currentPoetry: null
    }
  },
  computed: {
    currentPoem() {
      return this.poems[this.currentPoemIndex];
    }
  },
  methods: {
    prevPoem() {
      this.currentPoemIndex = (this.currentPoemIndex - 1 + this.poems.length) % this.poems.length;
    },
    nextPoem() {
      this.currentPoemIndex = (this.currentPoemIndex + 1) % this.poems.length;
    },
    handleCategorySelect(key) {
      this.categoryActiveIndex = key;
      console.log('Category selected:', key);
      
      // 添加页面跳转逻辑
      switch (key) {
        case '1':
          this.$router.push('/tang-poetry');
          break;
        case '2':
          this.$router.push('/song-poetry');
          break;
        case '3':
          this.$router.push('/yuan-poetry');
          break;
        case '4':
          this.$router.push('/modern-poetry');
          break;
        case '5':
          this.$router.push('/foreign-poetry');
          break;
      }
    },
    showPoemDetail(index) {
      console.log('Show poem detail:', this.popularPoems[index]);
    },
    startGame(path) {
      console.log('Start game:', path);
      ElMessage.success(`准备开始${path.split('.')[0]}游戏！`);
    },
    navigateTo(path) {
      console.log('Navigate to:', path);
      this.$router.push(path);
    },
    showStoryDetail(story) {
      this.currentStory = story;
      this.currentPoetry = null;
      this.dialogVisible = true;
    },
    showPoetryDetail(index) {
      this.currentPoetry = this.poetryDetails[index - 1];
      this.currentStory = null;
      this.dialogVisible = true;
    },
    handleClose() {
      this.dialogVisible = false;
    }
  }
}
</script>

<style scoped>
:deep(.el-card) {
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
  border: none;
  overflow: hidden;
  background-color: rgba(255, 255, 255, 0.9)!important;
}

:deep(.el-card:hover) {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  transform: translateY(-3px);
}

:deep(.el-card__header) {
  border-bottom: none;
  padding: 16px 20px;
}

:deep(.el-card__body) {
  padding: 20px;
}

.poem-card {
  background-color: rgba(255, 255, 255, 0.9)!important;
  backdrop-filter: blur(10px);
}

.poet-quote-card {
  background-color: rgba(255, 255, 255, 0.8)!important;
  border-left: 4px solid #409EFF;
}

.quote-container {
  background: rgba(255, 255, 255, 0.8);
  border-radius: 8px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 20px;
}

.story-card {
  border: 1px solid #f0f0f0;
  border-radius: 12px;
  transition: all 0.3s ease;
}

.story-card:hover {
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06);
  transform: translateY(-2px);
}

.game-card {
  border: 1px solid #f0f0f0;
  border-radius: 12px;
  overflow: hidden;
  transition: all 0.3s ease;
}

.game-card:hover {
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

.game-icon {
  width: 60px;
  height: 60px;
  background-color: rgba(64, 158, 255, 0.1);
}

.category-menu {
  border: none;
}

:deep(.category-menu .el-menu-item) {
  height: auto;
  padding: 12px 20px;
  margin-bottom: 4px;
  border-radius: 8px;
}

:deep(.category-menu .el-menu-item:hover),
:deep(.category-menu .el-menu-item.is-active) {
  background-color: rgba(64, 158, 255, 0.1);
}

.popular-poems {
  border-radius: 12px;
  padding-right: 6px;
}

.poem-item {
  transition: all 0.2s ease;
}

.poem-item:hover {
  transform: translateX(5px);
}

.text-primary {
  color: #409EFF;
}

.story-content {
  margin-top: 10px;
}

:deep(.el-dialog) {
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
  overflow: hidden;
}

:deep(.el-dialog__header) {
  background-color: #f5f7fa;
  border-bottom: 1px solid #ebeef5;
  padding: 16px 20px;
}

:deep(.el-dialog__body) {
  padding: 20px;
}

:deep(.el-dialog__footer) {
  background-color: #f9fafc;
  border-top: 1px solid #ebeef5;
  padding: 15px 20px;
}

/* 背景图片样式 */
.home-view {
  position: relative;
  min-height: 100vh;
}

.bg-gradient-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(240, 248, 255, 0.7) 100%);
  z-index: -1;
}

.bg-gradient-overlay img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.2;
  filter: blur(4px);
}

/* 响应式调整 */
@media (max-width: 768px) {
  .bg-gradient-overlay img {
    filter: blur(2px);
    opacity: 0.15;
  }
}
</style>